<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="oCanvas" width="500" height="400"></canvas>
    <script type="notjs" id="vertex">
        // 存储限定符    数据类型   变量名称
        attribute vec4 a_position;
        attribute vec2 a_texture;
        varying vec2 v_Texture;
        void main() {
            gl_Position = a_position;
            v_Texture = a_texture;
        }
    </script>
    <script type="notjs" id="fragment">
        precision mediump float;
        varying vec2 v_Texture;
        uniform sampler2D u_sampler;
        void main() {
            gl_FragColor = texture2D(u_sampler, v_Texture);
        }
    </script>
    <script>
        var oCanvas = document.getElementById('oCanvas');
        var gl = oCanvas.getContext('webgl');

        if (!gl) {
            alert('浏览器不支持webgl');
        }

        function createShader(gl, type, source) {
            // 创建着色器
            var shader = gl.createShader(type);
            // 
            gl.shaderSource(shader, source);
            // 将着色器数据源转化成代码
            gl.compileShader(shader);

            // 判断着色器是否建立完成  
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

            if (success) {
                return shader;
            }
            console.log(gl.getShaderInfoLog(shader));
        }
        // gl.VERTEX_SHADER    gl.FRAGMENT_SHADER

        var vertexStr = document.getElementById('vertex').innerText;
        var fragmentStr = document.getElementById('fragment').innerText;

        // 创建着色器
        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexStr);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr);

        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program));
        }

        var program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        var a_position = gl.getAttribLocation(program, "a_position");
        var a_texture = gl.getAttribLocation(program, "a_texture");
        var u_sampler = gl.getUniformLocation(program, 'u_sampler');
        console.log(a_position);

        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        // 250 * 200大小
        var positionData = new Float32Array([
            -0.5, 0.5, 0, 1,
            0.5, 0.5, 1, 1,
            0.5, -0.5, 1, 0,

            0.5, -0.5, 1, 0,
            -0.5, -0.5, 0 ,0 ,
            -0.5, 0.5, 0, 1,
        ]);
        gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
        // stride :  两个顶点间的字节数
        // offset: 数据的偏移量
        gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 4 * 4, 0 * 4);
        gl.vertexAttribPointer(a_texture, 2, gl.FLOAT, false, 4 * 4, 2 * 4 );
        gl.enableVertexAttribArray(a_position);
        gl.enableVertexAttribArray(a_texture);

        var img = new Image();
        img.onload = function () {
            var texture = gl.createTexture();
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            // 如果纹理源图像是2的整幂次方  纹理图像只需要放大或缩小的填充几何图形
            // 如果不是2的整幂次方的大小 140 * 140 ---》 128 * 128  TEXTURE_MIN_FILTER 进行缩小
            // 128 * 128 ---> 250 * 200   TEXTURE_WRAP_T TEXTURE_WRAP_S 值必须为 CLAMP_TO_EDGE
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
            gl.uniform1i(u_sampler, 0);
            gl.drawArrays(gl.TRIANGLES, 0, 6);
        }
        // 大小：  218 * 328 --->   256 * 256  填充入 250 * 200 ---> 
        img.src="./1.png";

       




    </script>
</body>

</html>
